<script lang="jsx" setup>
import { nextTick, ref } from 'vue';
import { DeleteOutlined, EditOutlined, PlusOutlined } from '@ant-design/icons-vue';
import { addBoardType, deleteBoardType, updateBoardType } from '@/service/api/modules/workwear/board-management';

const commonSearchRef = ref(null);
const searchParams = ref({
  itemName: null,
  meshCount: null
});
const searchFormList = [
  {
    type: 'input',
    key: 'itemName',
    label: '项目名称',
    placeholder: '请输入项目名称',
    span: 24,
    md: 12,
    lg: 8,
    xl: 8,
    xxl: 4
  },
  {
    type: 'input',
    key: 'meshCount',
    label: '网目',
    placeholder: '请输入网目',
    span: 24,
    md: 12,
    lg: 8,
    xl: 8,
    xxl: 4
  }
];

const tableRef = ref(null);
const tabaleSelect = ref([]);
const column = [
  {
    key: 'dataIndex',
    dataIndex: 'dataIndex',
    title: '序号',
    fixed: 'left',
    width: 70,
    align: 'center',
    checked: true,
    ellipsis: true
  },

  {
    key: 'itemName',
    dataIndex: 'itemName',
    title: '项目名称',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'deptName',
    dataIndex: 'deptName',
    title: '使用部门',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'meshCount',
    dataIndex: 'meshCount',
    title: '网目',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'totalLive',
    dataIndex: 'totalLive',
    title: '使用寿命',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'totalWc',
    dataIndex: 'totalWc',
    title: '翻洗次数',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'createBy',
    dataIndex: 'createBy',
    title: '创建人',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'createDate',
    dataIndex: 'createDate',
    title: '创建时间',
    align: 'center',
    width: 170,
    checked: true,
    ellipsis: true
  },

  {
    key: 'updateDate',
    dataIndex: 'updateDate',
    title: '修改时间',
    width: 170,
    align: 'center',
    checked: true,
    ellipsis: true
  }
];

function tableSelectChange(val) {
  tabaleSelect.value = val;
}

const { handleClose, handleLoading, handleShow, updateModalOptions } = window.$useModal({
  modalOption: {
    title: '新增网板类型',
    width: '600px',
    height: '520px',
    destroyOnClose: true
  },
  formData: {
    itemName: null,
    deptName: null,
    meshCount: null,
    totalLive: null,
    totalWc: null
  },
  formList: [
    {
      type: 'input',
      key: 'itemName',
      label: '项目名称',
      placeholder: '请输入项目名称',
      span: 24,
      rule: [{ required: true, message: '请输入项目名称', trigger: 'blur' }]
    },
    {
      type: 'dictionary',
      key: 'deptName',
      label: '所属部门',
      placeholder: '请选择所属部门',
      dictCode: 'board_use_dept',
      selectType: 'select',
      span: 24,
      rule: [{ required: true, message: '请选择所属部门', trigger: 'blur' }]
    },
    {
      type: 'input',
      key: 'meshCount',
      label: '网目',
      placeholder: '请输入网目',
      span: 24
    },
    {
      type: 'input',
      key: 'totalLive',
      label: '使用寿命',
      placeholder: '请输入使用寿命',
      span: 24
    },
    {
      type: 'input',
      key: 'totalWc',
      label: '翻洗次数',
      placeholder: '请输入翻洗次数',
      span: 24
    }
  ],
  onClose: () => {},
  onOk: data => {
    let pro;
    if (operationType.value === 'add') {
      pro = addBoardType(data);
    } else {
      pro = updateBoardType(data);
    }
    handleLoading(true);
    pro
      .then(({ data, error }) => {
        if (!error) {
          window.$message.success('操作成功');
          search();
          handleClose();
        }
      })
      .finally(() => {
        handleLoading(false);
      });
  }
});

const operationType = ref('add');
function handleAdd(type) {
  if (type === 'edit') {
    // 修改
    console.log('修改');
    updateModalOptions({
      title: '修改网板类型'
    });
    handleShow(tabaleSelect.value[0]);
  } else {
    // 新增
    console.log('新增');
    updateModalOptions({
      title: '新增网板类型'
    });
    handleShow();
  }
  operationType.value = type;
}

function handelDel() {
  window.$modal.confirm({
    title: (
      <div>
        确定将所勾选的项进行<span class="color-red font-bold">删除</span>操作吗？
      </div>
    ),
    onOk: () => {
      deleteBoardType(tabaleSelect.value).then(({ error }) => {
        if (!error) {
          window.$message.success('删除成功');
          search();
        }
      });
    },
    onCancel: () => {}
  });
}

function search() {
  tableRef.value.getData(1);
}

function reset() {
  nextTick(() => {
    searchParams.value.itemName = null;
    searchParams.value.meshCount = null;
    search();
  });
}
</script>

<template>
  <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <CommonSearch
      ref="commonSearchRef"
      v-model:searchParams="searchParams"
      :form-list="searchFormList"
      :is-search="true"
      @search="search"
      @reset="reset"
    ></CommonSearch>
    <Table
      ref="tableRef"
      v-model:searchParams="searchParams"
      :column="column"
      show-row-selection
      row-key="id"
      auto-generate-uuid
      :scroll="{ y: 'auto' }"
      is-init-get-data
      url="/qms/scrscreen/scrscreenType/pageList"
      @table-select-change="tableSelectChange"
    >
      <template #title>
        <AButton type="primary" class="mini-btn mr-8px" size="small" ghost @click="handleAdd('add')">
          <template #icon>
            <PlusOutlined class="align-sub" />
          </template>
          新增
        </AButton>
        <AButton
          type="primary"
          class="mini-btn mr-8px"
          size="small"
          ghost
          :disabled="tabaleSelect.length != 1"
          @click="handleAdd('edit')"
        >
          <template #icon>
            <EditOutlined class="align-sub" />
          </template>
          修改
        </AButton>

        <AButton
          type="primary"
          danger
          class="mini-btn mr-8px"
          size="small"
          ghost
          :disabled="!tabaleSelect.length"
          @click="handelDel"
        >
          <template #icon>
            <DeleteOutlined class="align-sub" />
          </template>
          删除
        </AButton>
      </template>
    </Table>
  </div>
</template>

<style lang="scss" scoped></style>
